<template>
  <div class="hello">
    <h1>脑图案例</h1>
    <el-button type="" @click="add">添加节点</el-button>
    <div id="container"></div>
  </div>
</template>


<script>
import { Shape, Graph, DataUri, minimapContainer } from "@antv/x6";
import Hierarchy from "@antv/hierarchy";
import { GridLayout } from "@antv/layout";
import x6MainFn from "@/components/mod/x6Main/index.js";
var mainFn = {};
export default {
  name: "containerMind",
  data() {
    return {
      graph: "",
      data: {
        nodes: [],
        // 边
        edges: [],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    add2() {
      let id = new Date().toString()

      this.data.nodes.push({
        id:id,
        shape: "rect", //使用 rect 渲染 样式图形
        x: undefined, //
        y: undefined,
        width: 80, //可选，节点大小的 width 值
        height: 40, //可选，节点大小的 height 值
        parent: "node4",
        attrs: {
          //定制样式
          body: {
            fill: "#2ECC71",
            stroke: "#000",
            strokeDasharray: "10,2",
          },
          label: {
            text: "自定义节点",
            fill: "#333",
            fontSize: 13,
          },
        }, // String，节点标签
      })

      
      this.data.edges.push({
        source: "node4",
        target: id,
      })

      const { DagreLayout } = window.layout;

      const dagreLayout = new DagreLayout({
        type: "dagre",
        rankdir: "LR",
        align: "",
        ranksep: 30,
        nodesep: 15,
        controlPoints: true,
      });

      const newModel = dagreLayout.layout(this.data );

      this.graph.fromJSON(newModel);
    },
    add() {
      this.add2();
      return false;
      let node = this.graph.createNode({
        shape: "rect", //使用 rect 渲染 样式图形
        x: undefined, //
        y: undefined,
        width: 80, //可选，节点大小的 width 值
        height: 40, //可选，节点大小的 height 值
        parent: "node4",
        attrs: {
          //定制样式
          body: {
            fill: "#2ECC71",
            stroke: "#000",
            strokeDasharray: "10,2",
          },
          label: {
            text: "自定义节点",
            fill: "#333",
            fontSize: 13,
          },
        }, // String，节点标签
      });
      let cell = this.graph.getCellById("node4");
      // cell.addChild(node);
      let edge = this.graph.createEdge({
        source: "node4",
        target: node.id,
      });
      this.graph.addCell([node, edge])
      this.graph.freeze()
      setTimeout(() => {
        this.graph.unfreeze()
      },1000)
      /* let initdata = mainFn.getNodesInited();
      console.log("initdata", initdata);
      console.log("nodes", this.graph.getNodes());
      console.log("edges", this.graph.getEdges());
      let arr = { nodes: [], edges: [] };
      arr.nodes = initdata;
      console.log("arr", arr);
      this.graph.getEdges().map((item) => {
        let { id, shape, source = source.cell, target = target.cell } = item;
        arr.edges.push(item);
      });
      const { DagreLayout } = window.layout;

      const dagreLayout = new DagreLayout({
        type: "dagre",
        rankdir: "LR",
        align: "",
        ranksep: 30,
        nodesep: 15,
        controlPoints: true,
      });

      const newModel = dagreLayout.layout(arr);
      this.graph.clearCells();
      this.graph.fromJSON(newModel); */
    },
    init() {
      const graph = new Graph({
        container: document.getElementById("container"),
        width: 600,
        height: 400,
      });

      const model = {
        nodes: [
          {
            id: "node1",
            shape: "rect", // 使用 rect 渲染  样式图形

            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            attrs: {
              //定制样式
              body: {
                fill: "#2ECC71",
                stroke: "#000",
                strokeDasharray: "10,2",
              },
              label: {
                text: "Hello",
                fill: "#333",
                fontSize: 13,
              },
            }, // String，节点标签
          },
          {
            id: "node2",
            shape: "rect", // 使用 rect 渲染  样式图形

            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            attrs: {
              //定制样式
              body: {
                fill: "#2ECC71",
                stroke: "#000",
                strokeDasharray: "10,2",
              },
              label: {
                text: "node2",
                fill: "#333",
                fontSize: 13,
              },
            }, // String，节点标签
          },
          {
            id: "node3",
            shape: "rect", // 使用 rect 渲染  样式图形

            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            attrs: {
              //定制样式
              body: {
                fill: "#2ECC71",
                stroke: "#000",
                strokeDasharray: "10,2",
              },
              label: {
                text: "node3",
                fill: "#333",
                fontSize: 13,
              },
            }, // String，节点标签
          },
          {
            id: "node4",
            shape: "rect", // 使用 rect 渲染  样式图形
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            attrs: {
              //定制样式
              body: {
                fill: "#2ECC71",
                stroke: "#000",
                strokeDasharray: "10,2",
              },
              label: {
                text: "node4",
                fill: "#333",
                fontSize: 13,
              },
            }, // String，节点标签
          },
          {
            id: "node5",
            shape: "rect", // 使用 rect 渲染  样式图形
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            attrs: {
              //定制样式
              body: {
                fill: "#2ECC71",
                stroke: "#000",
                strokeDasharray: "10,2",
              },
              label: {
                text: "node5",
                fill: "#333",
                fontSize: 13,
              },
            }, // String，节点标签
          },
          {
            id: "node6",
            shape: "rect", // 使用 rect 渲染  样式图形
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            attrs: {
              //定制样式
              body: {
                fill: "#2ECC71",
                stroke: "#000",
                strokeDasharray: "10,2",
              },
              label: {
                text: "node6",
                fill: "#333",
                fontSize: 13,
              },
            }, // String，节点标签
          },
          {
            id: "node7",
            shape: "rect", // 使用 rect 渲染  样式图形
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            attrs: {
              //定制样式
              body: {
                fill: "#2ECC71",
                stroke: "#000",
                strokeDasharray: "10,2",
              },
              label: {
                text: "node7",
                fill: "#333",
                fontSize: 13,
              },
            }, // String，节点标签
          },
        ],
        edges: [
          {
            source: "node1",
            target: "node2",
          },
          {
            source: "node2",
            target: "node3",
          },
          {
            source: "node2",
            target: "node4",
          },
          {
            source: "node2",
            target: "node5",
          },
          {
            source: "node1",
            target: "node6",
          },
          {
            source: "node6",
            target: "node7",
          },
        ],
      };

      this.data = model
      const { DagreLayout } = window.layout;

      const dagreLayout = new DagreLayout({
        type: "dagre",
        rankdir: "LR",
        align: "",
        ranksep: 30,
        nodesep: 15,
        controlPoints: true,
      });

      const newModel = dagreLayout.layout(model);

      graph.fromJSON(newModel);
      this.graph = graph;
      mainFn = x6MainFn(graph);
    },
  },
};
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
}
.topic-image {
  visibility: hidden;
  cursor: pointer;
}
.x6-node:hover .topic-image {
  visibility: visible;
}
.x6-node-selected rect {
  stroke-width: 2px;
}
</style>
